JQuery UI in Visual Webpart for Office 365

As we know developing a visual webpart for Office 365 is quite irritating due to many restrictions. Last month while I was working on Office 365, I created a visual webpart with the default asp.net controls. But during the demo of that webpart, my Boss didnot liked the design of the webpart and he told me to use fancy controls for the Office 365 webpart. Long story short, I had to find a way to use JQuery UI with Office 365 as Ajax was not allowed by office 365.
The following are the series of steps that you can follow for using JQuery UI with Office 365;

Step a) Setting up the Project 1. Create a Empty Share point project(Sand boxed).
2. Add a new Visual web part(Sand boxed).
3. Right click your project. Goto Add->New Item and select 'Module' and name it 'JQueryDeploy'.
4. Now module consist of 'Elements.xml' and a txt file. You can delete the txt file.
5. Download the JQuery UI package with theme of your choice from http://jqueryui.com/. In my case i was working with 'jquery-1.8.2.js'.
6. Extract JQuery files from JQuery package and add those files in the module 'JQueryDeploy'.
Step b) Change Elements.xml for SiteAssests Library
7. You will notice that Elements.xml will be updated and will contain the paths of all the files.
8. Open Elements.xml and change module name as 'JQueryDeploy'. 
9. Add Url Property to 'SiteAssets' in module tag.
10. In File tag add Type=”GhostableInLibrary”. 
(The purpose of these settings is to upload the JQuery UI files into the SiteAssets library when the webpart is uploaded.)

In my case I want two fancy calendor controls and buttons. I added two text boxes for calendor controls and two asp.net buttons.
Step c) Render Controls using Javascript
Now as we have the asp.net controls, we have to load the load the JQuery UI style sheets and javascript files which will be present in the SiteAssests library once the webpart will be uploaded.
To accomplish this, we will write code by overriding the 'RenderContents' method in .net.

       
protected override void RenderContents(HtmlTextWriter writer)
        {
            StringBuilder js = new StringBuilder();

            js.AppendLine("var added = false");     
            js.AppendLine("if(!added)");
            js.AppendLine("{");
            js.AppendLine("  var head = document.getElementsByTagName(\"head\")[0];");
            js.AppendLine("  if(document.createStyleSheet)");
            js.AppendLine("  {");
            js.AppendLine("    document.createStyleSheet('" + SPContext.Current.Site.Url + "/SiteAssets/jquery-ui-1.9.0.custom.css" + "');");
            js.AppendLine("  } else {");
            js.AppendLine("    var css = document.createElement('link');");
            js.AppendLine("    css.type = 'text/css';");
            js.AppendLine("    css.rel = 'stylesheet';");
            js.AppendLine("    css.href = '" + SPContext.Current.Site.Url + "/SiteAssets/jquery-ui-1.9.0.custom.min.css" + "';");
            js.AppendLine("    head.appendChild(css);");
            js.AppendLine("  }");
            js.AppendLine("}");
            js.AppendLine("$(document).ready(function(){");
            js.AppendLine(" $('#" + FromDate.ClientID + "').datepicker({");
            js.AppendLine(" onSelect: function (dateText, inst) {");
            js.AppendLine(" var dateAsString = dateText;");
            js.AppendLine(" var dateAsObject = $(this).datepicker('getDate');");
            js.AppendLine(" }");
            js.AppendLine("  });");
            js.AppendLine(" $('#" + BisDate.ClientID + "').datepicker({");
            js.AppendLine(" onSelect: function (dateText, inst) {");
            js.AppendLine(" var dateAsString = dateText;");
            js.AppendLine(" var dateAsObject = $(this).datepicker('getDate');");
            js.AppendLine(" }");
            js.AppendLine("  });");
            js.AppendLine("$(\"input[type=button]\").button();");
            js.AppendLine("$(\"input[type=submit]\").button();");
            js.AppendLine("});");
            base.RenderContents(writer);
            writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/javascript");
            writer.AddAttribute(HtmlTextWriterAttribute.Src, SPContext.Current.Site.Url + "/SiteAssets/jquery-1.8.2.js");
            writer.RenderBeginTag(HtmlTextWriterTag.Script);
            writer.RenderEndTag();
            writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/javascript");
            writer.AddAttribute(HtmlTextWriterAttribute.Src, SPContext.Current.Site.Url + "/SiteAssets/jquery-ui-1.9.0.custom.js");
            writer.RenderBeginTag(HtmlTextWriterTag.Script);
            writer.RenderEndTag();
            writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/javascript");
            writer.AddAttribute(HtmlTextWriterAttribute.Src, SPContext.Current.Site.Url + "/SiteAssets/jquery-ui-1.9.0.custom.min.js");
            writer.RenderBeginTag(HtmlTextWriterTag.Script);
            writer.RenderEndTag();
            writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/javascript");
            writer.RenderBeginTag(HtmlTextWriterTag.Script);
            writer.WriteLine(js.ToString());
            writer.RenderEndTag();  }  
 

Now we have completed all the ingrediants and you will come up with following result once you run or deploy your webpart in Office 365;

Visual webpart(Sandboxed) for Office 365

If you want to develop a webpart for office 365 than first you have to download and install 'Visual studio 2010 Sharepoint Power tools'. You can get it from the following link

• http://visualstudiogallery.msdn.microsoft.com/8e602a8c-6714-4549-9e95-f3700344b0d9/

After installing, create a 'Empty sharepoint project' which will be sandbox based project. Now right click your project and goto Add ->New item and select Visual WebPart(Sandboxed) as shown in the figure below;

Migration of Office 365 SharePoint Lists to Share Point 2010

Recently I got an opportunity to work with 'Microsoft Office 365'. An important question rises here is 'What is office 365'? Microsoft office 365 is a collection of a office tools such as Microsoft Lync, MS SharePoint, Microsoft Exchange, Offic online etc on a cloud. 

While working on office 365, I realized that I need to create some web-parts and I want the same SharePoint Lists present on Office 365 on my local SharePoint environemnt. But the main hurdel was how to download all those Lists  :(

The following are the of steps that I performed to export lists present in my Office 365 SharePoint environment;

1. Go to your SharePoint Team site of Office 365 and open the SharePoint Designer.

2. Select the 'Lists & Libraries' option and select a particular list that you want to export.

3. After selecting the list, click on 'Save as template' option present in the ribbon.

4. Now SharePoint designer will take you to your SharePoint team site 'Save as template page'.

5. Enter the file name, template name and check 'include content' option and click OK.

6. Now go to the Site Actions->Site Settings->List Template(Under Galleries).

7. Download your list template(.stp file) that you created in step # 4 by clicking it.

The following are the lists of steps I performed to import lists in my local SharePoint 2010 environment;

1. Go to your SharePoint Team site.

2. Click Site Actions->Site Settings->List Template.

3. Click on Documents ribbon and select 'Upload Document'.

4. Select your .stp file and click OK.

5. Now to create list from this List template, go to Site Actions->More Options->List. Select your list template and then name your List and click  'Create'. Now a new list will be created along with content. :)

Notes:

1. Lookup columns may not work properly. Delete the column and create it manually.

2. If your Office 365 Online SharePoint is in other language such as German and the local Share Point environment is in English then follow this link : 

http://blogbaris.blogspot.de/2012/05/copy-sharepoint-lists-between-sites.html.